<template>
  <div class="app-container">
    <div>
      <span>设置扩展属性</span>
    </div>
    <br>
    <div>
      <span>扩展属性是指：在数据中除了表单原本字段对应值以外，附加的扩展值。扩展属性经常用于区分数据的来源，例如表单将会被发布到3个渠道，你可以设置3个带有对应扩展属性值的表单链接进行发布。</span>
    </div>
    <br>
    <div>
      <el-input v-model="url" :placeholder="showUrl" :disabled="true" style="width: 40%;" />
      <el-input ref="name" v-model="name" style="width: 10%;" />
      <el-button type="primary" @click="addExtra()">生成地址</el-button>
    </div>
    <br>
    <div>
      <tr v-for="ext in extraName" :key="ext">
        <td style="width: 1000px;">
          <el-input v-model="input" :placeholder="extraAttributes" :disabled="true" style="width: 50%;" />
          <el-input v-model="input" :placeholder="ext" :disabled="true" style="width: 11%;" />
          <el-button type="info" class="btn" :data-clipboard-text="extraAttributes + ext" @click="copy">复制网址</el-button>
          <el-button type="info" @click="turnOn(extraAttributes,ext)">直接打开</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="del(ext)" />
        </td>
      </tr>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Clipboard from 'clipboard'
export default {
  name: 'TopicList',
  data() {
    return {
      sign: '',
      formInfoId: null,
      form: null,
      url: '',
      name: '',
      input: '',
      uploadAction: this.cfg.apiDomain + '/file/upload/upload?uploadItem=topicPostImg',
      listLoading: true,
      extraName: '',
      extraAttributes: '',
      showUrl: ''
    }
  },
  created() {
    this.getRouterData()
    this.getList()
  },
  methods: {
    getList() {
      const voteForm = 'voteForm';
      if (voteForm === this.sign) {
        this.listLoading = true
        request({
          url: '/extra/activity/getExtraUrl',
          method: 'get',
          params: {
            activityId: this.formInfoId
          }
        }).then(res => {
          const data = res.data
          this.extraName = data.extraName
          this.listLoading = false
        })
      } else {
        this.listLoading = true
        request({
          url: '/extra/form/getExtraUrl',
          method: 'get',
          params: {
            formInfoId: this.formInfoId
          }
        }).then(res => {
          const data = res.data
          this.extraName = data.extraName
          this.listLoading = false
        })
      }
    },
    // 获取数据
    getRouterData() {
      // eslint-disable-next-line eqeqeq
      if (this.$router.history.current.query.id != null && this.$router.history.current.query.id != '') {
        this.formInfoId = this.$router.history.current.query.id;
        this.sign = this.$router.history.current.query.form;
        this.showUrl = this.$router.history.current.query.url;
        this.extraAttributes = this.$router.history.current.query.url + '?extra=';
      }
    },
    del(name) {
      const voteForm = 'voteForm';
      if (voteForm === this.sign) {
        request({
          url: '/extra/activity/delete',
          method: 'post',
          data: {
            activityId: this.formInfoId,
            extraName: name
          }
        }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      } else {
        request({
          url: '/extra/form/delete',
          method: 'post',
          data: {
            formInfoId: this.formInfoId,
            extraName: name
          }
        }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }
    },
    addExtra() {
      const voteForm = 'voteForm';
      if (voteForm === this.sign) {
        request({
          url: '/extra/activity/save',
          method: 'post',
          data: {
            activityId: this.formInfoId,
            extraName: this.name
          }
        }).then(res => {
          this.$message.success('添加成功')
          this.getList()
          this.name = ''
        })
      } else {
        request({
          url: '/extra/form/save',
          method: 'post',
          data: {
            formInfoId: this.formInfoId,
            extraName: this.name
          }
        }).then(res => {
          this.$message.success('添加成功')
          this.getList()
          this.name = ''
        })
      }
    },
    copy: function() {
      const clipboard = new Clipboard('.btn')
      // 注意要使用let或者const，不能使用var，否则会出现复制次数叠加的问题，即复制不止一次。
      // 因为var是全局变量，let和const是局部
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        clipboard.destroy() // 使用destroy可以清楚缓存
      })
      clipboard.on('error', e => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    turnOn: function(url, param) {
      // window.location.href = 'http://www.baidu.com'; // 在同当前窗口中打开窗口
      // 表单地址
      // window.open(url + param);
      window.open('http://www.baidu.com');
    }
  }
}
</script>
